<!-- 选择公司 -->
<template>
  <div class="page-select-main">
    <div class="page-select-enterprise" v-if="checkedCompany == 0">
      <div
        class="page-select-enterprise-item"
        v-for="item in companyList"
        :key="item.id"
        @click="checkedCompanyFn(item)"
      >
        <div class="select-enterprise-item-content">
          <Icon type="md-cube" size="36" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="page-select" v-if="checkedCompany != 0">
      <div class="page-select-head">
        <Button type="primary" @click="callbackLastStep">返回</Button>
        <h4>{{ checkedCompanyName }}</h4>
      </div>
      <div class="page-select-company">
        <div class="page-already-have-company" v-if="checkedCompany == 1">
          <ExistingEnterprise @handleSuccess="handleAgree"/>
        </div>
        <div class="page-new-company" v-if="checkedCompany == 2">
          <NewEnterprise @handleSuccess="handleAgree" @updateScroll="updateScroll"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ExistingEnterprise from "./existingEnterprise.vue";
import NewEnterprise from "./newEnterprise.vue";
export default {
  components: {
    ExistingEnterprise,
    NewEnterprise,
  },
  props: {
    types: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      isBtnDisabled: true,
      checkedCompany: 0,
      checkedCompanyName: "",
      companyList: [
        {
          id: 1,
          name: "选择现有企业",
        },
        {
          id: 2,
          name: "注册新企业",
        },
      ],
    };
  },
  methods: {
    handleAgree() {
      this.$emit("handleAgree", this.$props.types);
    },
    // 加入企业操作
    checkedCompanyFn(item) {
      this.checkedCompany = item.id;
      this.checkedCompanyName = item.name;
      let { query } = this.$route;
      this.$router.push({
        path: "/register",
        query: {
          ...query,
          type: item.id,
        },
      });
    },
    // 返回上一步
    callbackLastStep() {
      let { query } = this.$route;
      this.checkedCompany = 0;
      this.$router.push({
        path: "/register",
        query:{
          current:query.current
        }
      });
    },
    updateScroll(ev){
      this.$emit("updateScroll",ev)
    }
  },
  created() {
    let { query } = this.$route;
    if (query.type) {
      let item = this.companyList.find((o) => o.id == query.type);
      this.checkedCompany = query.type;
      this.checkedCompanyName = item.name;
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-select-enterprise {
  display: flex;
  justify-content: center;
  padding-top: 60px;
}
.page-select-enterprise {
  display: flex;
  .page-select-enterprise-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 24px;
    border: 1px solid #ccc;
    margin: 0 50px;
    cursor: pointer;
    .select-enterprise-item-content {
      border-radius: 24px;
      text-align: center;
      p {
        margin-top: 20px;
        font-size: 20px;
      }
    }
  }
  .page-select-enterprise-item:hover {
    border-color: #2d8cf0 !important;
    color: #2d8cf0 !important;
  }
}
.page-select-head {
  display: flex;
  align-items: center;
  h4 {
    margin-left: 15px;
    font-size: 20px;
  }
}
</style>
